<template>
<div class="home-layout">
    <div class="home-nav-box">
      <input-nav  @coffee-show="getBoolean"
      @setSearchPro='getSearchPro'
      @show-home="clearIpt"></input-nav>
    </div>
  <div class="home" v-show="!flag">
    <div class="home-box" >
      <!-- 轮播图 -->
      <div class="home-box-img">
        <van-swipe style="height:250px" @change="onChange"
        :autoplay="3000" :duration="500"  indicator-color="#ffffff"
         >
          <van-swipe-item v-for="(item,index) in bannerArray" :key="index"  @click="viewDetail(item.pid)">
            <img :src="item.bannerImg">
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              <div class="line-indicator"  :class="dot==0 ? 'active':''"></div>
              <div class="line-indicator" :class="dot==1 ? 'active':''"></div>
              <div class="line-indicator"  :class="dot==2 ? 'active':''"></div>
              <div class="line-indicator"  :class="dot==3 ? 'active':''"></div>
            </div>
          </template>
        </van-swipe>
      </div>
      <!-- 热卖推荐 -->
      <div class="home-hot">
        <div class="home-hot-item">热卖推荐</div>
      </div>
      <!-- 商品列表 -->
      <div class="hot-pro">
        <div class="hot-pro-item" v-for="(item,index) in productArr" :key="index"
        @click="viewDetail(item.pid)">
          <hot-coffee :hot="item" ></hot-coffee>
        </div>
      </div>
    </div>
  </div>
    <!-- 搜索框内容的组件 -->
    <div class="home-search" v-show="flag">
        <!-- 图片 -->
    <div class="my-img">
      <img class="auto-img" :src="imgUrl" alt="">
    </div>
    <!-- 我的详情盒子 -->
    <div class="my-box">
        <div class="my-pro" v-for="(item,index) in searchPros"
        :key="index">
            <div class="product" @click="viewDetail(item.pid)">
                <div class="product-img">
                <img class="auto-img" :src="item.smallImg" />
                </div>
                <div class="product-zh one-text">{{item.name}}</div>
                <div class="product-en one-text">{{item.enname}}</div>
                <div class="slot">
                    <div class="product-price">&yen;{{item.price}}</div>
                </div>
            </div>
        </div>
    </div>
    </div>

</div>
</template>

<script>
import InputNav from "../components/InputNav.vue";
import HotCoffee from "../components/HotCoffee.vue";

export default {
  name: "Home",
  components: {
    InputNav,
    HotCoffee,

  },
  data() {
    return {
      //图片背景
      imgUrl:require('../assets/images/orderbg.png'),
      //轮播图开始下标
      current: 0,
      //轮播图
      bannerArray:[],
      //热卖推荐
      productArr:[],
      flag:false,
      //搜索商品
      searchPros: [],
      //高亮索引开始标志
      dot:0,
    };
  },
  created() {
    //轮播图
    this.getBanner();
    //热卖商品推荐
    this.getProductByType();
  },
  methods: {
    
    //轮播图的方法
    onChange(index) {
      // 
      this.current = index;
      // 索引高亮跟随自动轮播
      this.dot=this.dot > 3 ? 0 : index;
    },
    //获取轮播图图片
    getBanner() {
      this.axios({
        method:'get',
        url:'/banner',
      }).then(res=>{
        // 
        if(res.data.code==300) {
          this.bannerArray=res.data.result;
        }
      }).catch(err=>{
        
      })
    },
    //根据商品类型获取商品数据(热卖推荐)
    getProductByType() {
        // 处理商品类型 (type:商品类型)
        let key='isHot';
        let value=1;
        this.axios({
            method:'get',
            url:'/typeProducts',
            params: {
                //params参数在请求拦截器中添加处理
                key,
                value
            }
        }).then(res=>{
            // 
            if(res.data.code==500) {
                this.productArr=res.data.result;
            }
        }).catch(err=>{
            
        })
    },
    // 查看商品详情
    viewDetail(pid) {
      this.$router.push({name:'Detail',   params:{pid}
      })
    },
    //让搜索组件显示(InputNav组件传过的参数)
    getBoolean(data) {
      // 
      this.flag=data.show;
    },
    //获取搜索到的商品
    getSearchPro(obj) {
      this.searchPros=obj.data;
      // 
    },
    //拿到清空输入框的值
    clearIpt(data) {
      // 
      this.flag=data;
    }
  },
};
</script>

<style lang="less" scoped>
@import url('../assets/base.less');
.home-search {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 50px;
  background-color: @bg_Color;

  .my-img {
  width: 100%;
  height: 100px;
  background-color: @bg_Color;
}
.my-box {
  margin: 0 10px;
  padding: 10px;
  background-color: #fff;
  position: relative;
  top: -20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-wrap:wrap;
}
.my-pro {
    width:calc(~"33.3333% - 10px");
    margin-right: 10px;
    margin-bottom: 10px;
    &:nth-child(3n){
        margin-right: 0;
    }
}
.product-img {
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
}
.product-zh {
    font-size:14px;
    margin-top: 10px;
}
.product-en {
    color:#666;
    margin: 5px 0;
}
.product-price {
    font-weight:bold;
    color:@priceColor;
}
.slot {
    
    font-size: 16px;
    color:#999;

}
}
.hot-pro {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  .hot-pro-item {
    width:calc(~"50% - 5px");
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    &:nth-child(2n) {
        margin-right: 0;
    }
  }
}
.home-hot {
  width:100%;
  height:54px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  background-color: #fff;
  .home-hot-item {
    width:100px;
    height:36px;
    line-height: 36px;
    text-align: center;
    background-color: @mainColor;
    color:#fff;
    font-size: 14px;
    font-weight: bold;
    border-top-right-radius: 18px;
  }
}
.home-nav-box {
  position: sticky;
  top: 0;
}
.home-box {
  padding:10px;
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 50px;
  background-color: #f7f7f7;
  overflow-y: auto;
  .home-box-img {
    width:100%;
    height:250px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #e8e8e8;
    position: relative;
    .custom-indicator {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 2px 5px;
      display: flex;
      align-items: center;
      .line-indicator {
        width:15px;
        height:3px;
        border-radius:3px;
        background-color: #777;
        margin-right: 5px;
      }
      .line-indicator:last-child {
        margin-right: 0;
      }
      .line-indicator.active {
        background-color: #fff;
      }
    }
  }
}
</style>